<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS打字小游戏</title>
    <script>
        window.onload =function () {
            var score=document.getElementById('scores');
            score.style.color='red';
            score.style.fontSize='40px';
        }
    </script>
    <style>
        body {
            padding: 0px;
            margin: 0;
        }

        #gameStage {
            width: 100%;
            height: 1000px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="gameStage">
    <label style="color: red "></label><label style="font-size: 40px">当前得分:</label><span id="scores">0</span>
</div>
<script>
    /**
     * 字母
     * @param id
     * @param alphabet
     * @param posX
     * @param posY
     * @param size
     * @constructor
     */
    function Word(id, alphabet, posX, posY, size) {

        //初始化数据
        this.id = id || '';
        this.alphabet = alphabet || 'a';
        this.posX = posX || 0;
        this.posY = posY || 0;
        this.size = size || 64;


        // 新建
        this.create = function () {
            var str = '<span class="word" id="alphabet-' + this.id + '">' + this.alphabet + '</span>';
            var gameStage = document.getElementById('gameStage');
            gameStage.innerHTML += str;


            var divNode = document.getElementById('alphabet-' + this.id);
            divNode.style.position = 'absolute';
            divNode.style.fontSize = this.size + 'px';
            divNode.style.left = this.posX + 'px';
            divNode.style.top = this.posY + 'px';

        };

        // 重置.
        this.reset = function () {
            var divNode = document.getElementById('alphabet-' + this.id);
            divNode.style.display = 'none';
            this.moveTo(0, 0);
        };

        // 移动到指定点
        this.moveTo = function (posX, posY) {
            this.posX = posX;
            this.posY = posY;

            var divNode = document.getElementById('alphabet-' + this.id);
            divNode.style.left = posX + 'px';
            divNode.style.top = posY + 'px';
        };

    }

    /**
     * 导演类
     */
    var director = {
        alphabets: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        nodes: new Array(),

        /**
         * 逐帧运行
         */
        runFrame: function () {

            //更新已经产生所有点的坐标
            for (var index in this.nodes) {
                var node = this.nodes[index];
                if (node) {
                    node.moveTo(node.posX, node.posY + 5);
                }
            }
            //判断游戏是否结束
            for(var i=0,len=this.nodes.length;i<len;i++)
            {
                if(!this.nodes[i])
                {
                    continue;
                }
                if(this.nodes[i].posY>=window.innerHeight)
                {
                    setTimeout(function () {
                        clearTimeout(it);
                    });
                    alert("Game Over!");
                    alert('你的得分为:'+scoreCounter.getScore());
                }
            }

            //随机产生字母
            var r = Math.floor(Math.random() * this.alphabets.length);
            var w = new Word(new Date().getTime(), this.alphabets[r]);

            w.create();
            this.nodes.push(w);

            var posX = Math.floor(Math.random() * window.innerWidth);
            if (posX < 50) {
                posX = 100;
            }
            if (posX >= window.innerWidth - 100) {
                posX = window.innerWidth - 100;
            }

            w.moveTo(posX, 0);
        },

        /**
         * 开始游戏
         */
        start: function () {
            var _this = this;
            //监听键盘事件
            document.onkeydown = function () {
                var alphabet = String.fromCharCode(event.keyCode); //获取键盘敲中的字母
                var pass=1;
                for (var i = 0, len = _this.nodes.length; i < len; i++) {
                    if (!_this.nodes[i]) {
                        continue;
                    }
                    if (alphabet === _this.nodes[i].alphabet) {
                        pass=2;
                        _this.nodes[i].reset();
                        document.getElementById("scores").innerHTML = scoreCounter.incScore();
                        _this.nodes[i] = null;
                        return pass;
                        break;
                    }
                }
                if(pass=1)
                {
                    document.getElementById("scores").innerHTML = scoreCounter.outScore();
                }
            };

            //游戏主循环
            it=setInterval(function () {
                _this.runFrame();
            }, 500);
        }


    };

    /**
     * 计分器
     */
    var scoreCounter = {
        score: 0,  //玩家得分
        incScore: function () {
            this.score++;
            return this.score;
        },
        outScore:function () {
            this.score--;
            return this.score;
        },
        getScore:function () {
            return this.score;
        }

    };
    director.start();

</script>
</body>
</html>